package myJs.components

import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 3/11/2020
 */
object SelectInlineComponent {

  case class Props(state: StateSnapshot[String], label: String, name: String, optionMap: SeqMap[String, String],
                   show: Boolean = true, labelWidth: Int = 4, inputWidth: Int = 8) {
    @inline def render: VdomElement = Component(this)
  }

  class Backend(bs: BackendScope[Props, Unit]) {

    def didMount: Callback = {
      Callback {
      }
    }

    def unmount: Callback = {
      Callback {
      }
    }

    def render(p: Props) = {

      def valueChange(e: ReactEventFromInput) = {
        val myValue = e.target.value
        p.state.modState(x => myValue)
      }

      val s = p.state.value
      div(`class` := "form-group", (display := "none").unless(p.show),
        label(`class` := s"control-label col-sm-${p.labelWidth}",
          s"${p.label}", ":"
        ),
        div(`class` := s"col-sm-${p.inputWidth}",
          select(`class` := "form-control", name := s"${p.name}", value := s"${s}", onChange ==> valueChange,
            p.optionMap.toVdomArray { case (v, text) =>
              option(value := s"${v}", s"${text}")
            }
          )
        )
      )
    }

  }

  val Component = ScalaComponent.builder[Props].renderBackend[Backend].
    componentDidMount(x => x.backend.didMount).componentWillUnmount(_.backend.unmount).
    build

}



